<template>
<div class="my-favorite">
  <hm-header>我的收藏</hm-header>
    <hm-post v-for="post in list" :key="post.id" :post="post"></hm-post>
</div>
</template>

<script>
export default {
  data () {
    return {
      list: []
    }
  },
  async created () {
    const res = await this.$axios.get('/user_star')
    const { statusCode, data } = res.data
    if (statusCode === 200) {
      data.forEach(item => {
        item.comment_length = item.comments.length
      })
      this.list = data
      console.log(this.list)
    }
  }
}
</script>

<style lang="scss" scoped>
.my-favorite {
  .item {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        font-size: 14px;

      }
      .bottom {
        color: #888;
        span:first-child {
          margin-right: 10px;
        }
      }
    }
    .img-box {
      width: 120px;
      height: 75px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover; // 铺满，不留白   contain 包含
      }
    }
  }
}

</style>
